<template>
  <onez-node ref="role" class="onez-role" :class="['onez-role-' + type]" :data-roleId="roleId" v-if="ready">
    <template v-if="info">
      <onez-view class="nickname" v-if="info.nickname">{{ info.nickname }}</onez-view>
      <onez-view
        class="hotArea"
        @click.stop="click"
        @click.native="click"
        :style="{ left: hotSize.left + 'px', top: hotSize.top + 'px', width: hotSize.width + 'px', height: hotSize.height + 'px' }"
      ></onez-view>
    </template>
    <onez-node v-for="(arr, index) in statusArr" :key="index" v-show="status == arr.status" :show="status == arr.status" :dir="dir" class="status" :info="arr"></onez-node>
    <slot :role="info"></slot>
  </onez-node>
</template>
<script>
/**
 */
		import onezView from '../onez-view/onez-view.vue'
		import onezNode from '../onez-node/onez-node.vue'
export default {
  name: 'onez-role',
  components: {
  	onezView,onezNode
  },
  props: {
    roleId: {
      type: [String, Number],
      default: null
    },
    type: {
      type: String,
      default: 'player'
    },
    item: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      hotSize: { left: -25, top: -85, width: 50, height: 100 },
      info: null,
      hash: null,
      ready: false,
      mypos: [0, 0],
      status: 'stand',
      dir: 'b',
      statusArr: []
    };
  },
  watch: {
    roleId() {
      this.init();
    }
  },
  mounted() {
    this.init();
  },
  destroyed() {},
  methods: {
    click(e) {
      this.$emit('click', this.info);
    },
    async init() {
      this.ready = false;
      let role = null;
      await this.$game.wait(this);
      if (this.item) {
        this.info = this.item;
        if (!this.info) {
          return;
        }
      } else {
        this.info = await this.$game.hook(this, this.type + '_before');

        if (!this.info) {
          if (this.type == 'player') {
            this.info = await this.$game.hook(this, this.type, { userid: this.roleId });
          } else {
            this.info = await this.$game.call('data', {
              type: 'table',
              table: this.type,
              method: 'one',
              where: {
                _id: this.roleId
              }
            });
          }
        }
      }
      if (this.info) {
        if (this.info.role) {
          role = this.info.role;
        } else if (this.info.status) {
          role = this.info;
        }
      }
      if (!this.info || !role || !role.status) {
        return this.$game.error('加载角色失败');
      }
      if (!this.info.nickname) {
        this.info.nickname = this.info.name;
      }
      console.log('~~~~~~~~~~~~~~~~~~~', this.info.nickname, this.info.mypos);
      this.status = role.status || 'stand';
      this.dir = role.dir || 'b';
      this.statusArr = role.statusArr || [];
      if (this.info.mypos && typeof this.info.mypos == 'string') {
        let t = this.info.mypos.split(',');
        this.info.mypos = [parseInt(t[0]), parseInt(t[1])];
      }
      this.mypos = this.info.mypos || [-1, -1];
      if (this.$game.isMe(this.roleId)) {
        this.$game.mypos = this.mypos[0] + ',' + this.mypos[1];
        this.$game.setData({ mypos: this.mypos[0] + ',' + this.mypos[1] });
      }
      this.ready = true;
      this.$emit('ready', this.roleId || this.info._id);
      await this.$game.hook(this, this.type + '_after', this.info);
      this.$forceUpdate();
    },
    async goTo(scene, col, row, animate) {
      let role = this.$refs.role;
      if (!role) {
        return;
      }
      this.setDir(scene, [col, row]);
      var to = [col * scene.size, row * scene.size];
      if (animate) {
        var from = [this.mypos[0] * scene.size, this.mypos[1] * scene.size];
        var dt = 10;
        var direction = [from[0] - to[0], from[1] - to[1]];
        var distance = Math.sqrt(direction[0] * direction[0] + direction[1] * direction[1]);
        var msec = distance * dt;
        role.goTo([to[0], to[1], msec]);
        await this.$game.delay(msec * 0.001);
      } else {
        role.goTo([to[0], to[1], 0]);
      }
      this.mypos = [col, row];
      this.$emit('move', { roleId: this.roleId, animate: animate });
    },
    async wayTo(scene, paths) {
      var hash = Math.random();
      this.hash = hash;
      for (var i = 0; i < paths.length; i++) {
        if (this.hash != hash) {
          return;
        }
        this.status = 'run';
        await this.goTo(scene, paths[i][0], paths[i][1], true);

        if (this.$game.isMe(this.roleId)) {
          this.$game.mypos = paths[i][0] + ',' + paths[i][1];
          this.$game.setData({ mypos: paths[i][0] + ',' + paths[i][1] });
        }
      }
      this.status = 'stand';
    },
    setDir(scene, to) {
      var dir = 'b';
      var degree = Math.atan2(to[1] - this.mypos[1], to[0] - this.mypos[0]);
      var r = Math.floor(360 - (degree * 180) / Math.acos(-1.0)) % 360;
      //8方向
      if (r < 22.5 || r > 360 - 22.5) {
        dir = 'r';
      } else if (r >= 22.5 && r < 67.5) {
        dir = 'tr';
      } else if (r >= 67.5 && r < 112.5) {
        dir = 't';
      } else if (r >= 112.5 && r < 157.5) {
        dir = 'tl';
      } else if (r >= 157.5 && r < 202.5) {
        dir = 'l';
      } else if (r >= 202.5 && r < 247.5) {
        dir = 'bl';
      } else if (r >= 247.5 && r < 292.5) {
        dir = 'b';
      } else {
        dir = 'br';
      }
      this.dir = dir;
    }
  }
};
</script>
<style scoped>
.onez-role {
  pointer-events: none;
}
.hotArea {
  pointer-events: all !important;
  position: absolute;
  z-index: 1000;
  display: block;
}
.nickname {
  color: #fff;
  width: 100px;
  position: relative;
  left: -50px;
  top: -119px;
  text-align: center;
  z-index: 999;
  font-weight: bold;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
  display: block;
}
.onez-role-npc .hotArea {
  cursor: pointer;
}
</style>
